<template>
  <div class="contianer">
      <div class="header">
        <router-link to="trend" class="item">
            动态
        </router-link>
        <router-link to="answer" class="item">
            回答
        </router-link>
        <router-link to="article" class="item">
            文章
        </router-link>
        <router-link to="ask" class="item">
            提问
        </router-link>
        <!-- <div class="item">
            
        </div>
        <div class="item">
            <router-link to="answer">
                回答
            </router-link>
        </div>
        <div class="item">
            <router-link to="article">
                文章
            </router-link>
        </div>
        <div class="item">
            <router-link to="ask">
                提问
            </router-link>
        </div> -->
        <!-- <div class="item">
            回答
        </div>
        <div class="item">
            文章
        </div>
        <div class="item">
            提问
        </div> -->
      </div>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'user-content'
}
</script>

<style lang='less' scoped>
@import '../../../assets/styles/common.less';
.contianer{
    margin-top: 15rem/@baseFont;
    font-size: 16rem/@baseFont;
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45rem/@baseFont;
            background-color: #fff;
            .item{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 25%;
                height: 45rem/@baseFont;
                color: #000;
                border-bottom:#ffffff solid 3rem/@baseFont;
            }
            
    }
    
    
    
}
.router-link-active{
  border-bottom: #0084ff solid 3rem/@baseFont !important;
}
</style>